<!-- 简单图片缩放查看 -->
<template>
	<view style="position: relative;">
		<movable-area scale-area> 
			 <!-- :style="'height: ' + height + 'upx;width: ' + width + 'upx;'" -->
			<movable-view direction="all" scale scale-min="0.5" scale-max="10" :scale-value="scale">
				<image :src="url" style="width:400rpx;" mode="aspectFit" lazy-load></image>	
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scale: 1,
				item:{
					url: "" ,
					successUrl:""
				},
			}
		} ,
		props: {
			url:{
				type: String ,
				default: ""
			},
			height: {
				type: String ,
				default: "100vh"
			} ,
			width: {
				type: String ,
				default: "500rpx"
			}
		} ,
		methods: {
			
		}
	}
</script>

<style lang="scss">
	movable-view {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 40vh;
	  width: 100%;
	  background: #333;
	  color: #fff;
	}
	
	movable-area {
	  height: 500rpx;
	  width: 100%;
	  background-color: #333;
	  overflow: hidden;
	}
	
</style>